<template>
  <div>
    <!-- 头部查询 -->
    <a-form
      ref="searchRef"
      :hideRequiredMark="true"
      :model="searchForm"
      style="margin-bottom: 20px"
    >
      <a-row>
        <!-- 上线时间 -->
        <a-col :span="6">
          <a-form-item label="上线时间：">
            <a-range-picker @change="panelChange"></a-range-picker>
          </a-form-item>
        </a-col>
        <!-- 状态 -->
        <a-col :span="4" :offset="1">
          <a-form-item name="saleValue" label="状态：">
            <a-select
              ref="select"
              placeholder="请选择"
              allowClear
              v-model:value="searchForm.status"
              @change="handleChange"
              @focus="focus"
            >
              <a-select-option
                v-for="item in saleStatusOptions"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-col>
        <!-- 关键字 -->
        <a-col :span="6" :offset="1">
          <a-form-item name="saleValue" label="关键字">
            <a-input
              v-model:value="searchForm.keyWord"
              placeholder="根据编号，权益卡名称，权益卡类型查询"
              allowClear
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1">
          <a-button type="primary" class="d-a-center" @click="search"
            >搜索</a-button
          ></a-col
        >
      </a-row>
    </a-form>
    <!-- 列表区域 -->
    <a-table
      rowKey="id"
      :columns="columns"
      :row-selection="rowSelection"
      :data-source="memberList"
      bordered
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChanges"
    >
      <template #title
        ><a-button
          type="primary"
          v-has="{ a: $route, b: 2 }"
          class="d-a-center"
          @click="addBtn"
          >创建</a-button
        ></template
      >
      <template #status="{ record }">
        <div>
          {{ ["进行中", "已结束"][record.status] }}
        </div>
      </template>
      <template #stack="{ record, index }">
        <div
          v-has="{ a: $route, b: 2 }"
          @click="changeStack(record.status, index, record.id)"
        >
          <a-switch
            v-model:checked="record.status"
            :checkedValue="0"
            :unCheckedValue="1"
          />
        </div>
      </template>
      <template #operation="{ record }">
        <a-button
          type="link"
          v-has="{ a: $route, b: 2 }"
          @click="handleActive(record)"
        >
          激活明细</a-button
        >
        <a-button
          type="link"
          danger
          v-has="{ a: $route, b: 1 }"
          @click="look(record)"
          >查看</a-button
        >
        <a-button
          type="link"
          style="color: #35c0f2"
          v-has="{ a: $route, b: 1 }"
          @click="edit(record)"
          >编辑</a-button
        >
      </template>
    </a-table>
    <!-- 弹窗 -->
    <a-modal
      width="92%"
      v-model:visible="visibleShow"
      :title="title"
      @cancel="cancleOrder('visibleShow')"
    >
      <template #footer>
        <div class="d-j-around">
          <a-button
            v-if="title != '查看'"
            type="primary"
            class="d-a-center"
            @click="submitBtn"
            >保存</a-button
          >
          <a-button class="d-a-center" @click="cancleOrder('visibleShow')"
            >关闭</a-button
          >
        </div>
      </template>
      <!-- 表单 -->
      <a-form
        ref="formRef"
        style="padding-top: 20px"
        :hideRequiredMark="true"
        :rules="rules"
        :model="orderForm"
      >
        <!-- 名称，类型 -->
        <a-row :gutter="20">
          <a-col :span="12" :lg="10" :xs="10">
            <a-form-item
              label="权益卡名称"
              style="margin-left: 60px"
              name="name"
            >
              <a-input
                maxLength="10"
                placeholder="请输入权益卡名称"
                v-model:value="orderForm.name"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12" :lg="12" :xs="10">
            <a-form-item
              label="权益卡类型"
              style="margin-left: 155px"
              name="type"
            >
              <a-input
                v-model:value="orderForm.type"
                placeholder="请输入权益卡类型。ex：企业，个人用户"
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <!-- 数量，营业额 -->
        <a-row :gutter="20">
          <a-col :span="12" :lg="10" :xs="10">
            <a-form-item label="发放数量" style="margin-left: 72px" name="num">
              <a-input
                maxLength="10"
                placeholder="请输入权益卡数量"
                v-model:value="orderForm.num"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12" :lg="12" :xs="10">
            <a-form-item
              label="营业额"
              style="margin-left: 179px"
              name="businessPrice"
            >
              <a-input
                v-model:value="orderForm.businessPrice"
                placeholder="请输入合计产生的营业额"
                maxLength="10"
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <!-- 激活时间，使用时间 -->
        <a-row :gutter="20">
          <a-col :span="12" :lg="10" :xs="10">
            <a-form-item
              label="激活时间"
              style="margin-left: 72px"
              name="activateDay"
            >
              <a-input
                maxLength="10"
                placeholder="请输入激活天数"
                v-model:value="orderForm.activateDay"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12" :lg="12" :xs="10">
            <a-form-item
              label="使用时间"
              style="margin-left: 165px"
              name="useDay"
            >
              <a-input
                placeholder="请输入使用天数"
                v-model:value="orderForm.useDay"
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <!-- 创建时间，上线时间 -->
        <a-row :gutter="20" v-if="title === '编辑'">
          <a-col :span="12" :lg="10" :xs="10">
            <a-form-item
              label="创建时间"
              style="margin-left: 72px"
              name="createdAt
"
            >
              <a-input
                :disabled="EditDisable"
                maxLength="10"
                v-model:value="orderForm.createdAt"
                placeholder="请输入创建时间"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12" :lg="12" :xs="10">
            <a-form-item
              label="上线时间"
              style="margin-left: 155px"
              name="updatedAt"
            >
              <a-input
                :disabled="EditDisable"
                placeholder="请输入上线时间"
                v-model:value="orderForm.updatedAt"
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <!-- 备注信息，会员卡折扣 -->
        <a-row :gutter="20">
          <a-col :span="12" :lg="10" :xs="10">
            <a-form-item
              label="备注信息"
              style="margin-left: 72px"
              name="remark"
            >
              <a-input
                maxLength="10"
                v-model:value="orderForm.remark"
                placeholder="请输入备注信息"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12" :lg="12" :xs="10">
            <a-form-item
              label="会员卡折扣"
              style="margin-left: 155px"
              name="goodDiscount"
            >
              <a-input
                placeholder="请输入会员卡折扣"
                :disabled="EditDisable"
                v-model:value="orderForm.goodDiscount"
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <!-- 服务项目 -->
      <a-card title="服务项目: ">
        <a-button
          style="background: #02a7f0; color: #fff; border-radius: 5px"
          @click="editService"
          >编辑服务项目</a-button
        >
        <a-table
          v-if="serviceList.length > 0"
          :columns="serviceColumns"
          :data-source="serviceList"
        >
          <template #operation="{ record, index }">
            <a-button
              type="link"
              danger
              @click="closelog(index, record.id)"
              class="d-a-center"
              >删除</a-button
            >
          </template>
        </a-table>
      </a-card>
    </a-modal>
    <!-- 服务项目的弹窗 -->
    <a-modal width="92%" v-model:visible="editServiceShow" title="服务项目">
      <template #footer>
        <div class="d-j-around">
          <a-button @click="cancleOrder('editServiceShow')" class="d-a-center"
            >取消</a-button
          >
          <a-button
            type="primary"
            @click="editServiceShow = false"
            class="d-a-center"
            >确定</a-button
          >
        </div>
      </template>
      <!-- 头部 -->
      <div class="service">
        <!-- 左查询 -->
        <div class="left">
          <div class="search">
            <a-form
              style="padding-top: 20px"
              :model="searchForm"
              :hideRequiredMark="true"
              :label-col="labelCol"
            >
              <a-row :gutter="230">
                <a-col :span="6" :lg="5" :md="7" :xs="20">
                  <a-form-item name="nickName" label="">
                    <a-input
                      style="width: 200px"
                      v-model:value="serviceForm.serviceName"
                      placeholder="根据服务名称模糊搜索"
                      allowClear
                    ></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="2" :lg="4" :xs="5">
                  <a-button type="primary" @click="handleSearch">查询</a-button>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <div style="margin-left: 25px">已选服务：</div>
          <a-tag
            style="margin-top: 20px; margin-right: 15px"
            closable
            @close="closelog(index, item.id)"
            v-for="(item, index) in serviceList"
            :key="item.id"
            >{{ item.name }}*{{ item.num }}</a-tag
          >
        </div>
        <div class="middle"></div>
        <div class="right">
          <a-table
            :columns="serviceColumns"
            :data-source="servicesList"
            bordered
            :loading="loading"
            :pagination="paginations"
            @change="handleTableChanges1"
          >
            <template #consumables="{ record }">
              <div>
                {{ record.consumables[0].bleName }}
              </div>
            </template>
            <!-- 优惠折扣 -->
            <template #goodDiscount="{ record, index }">
              <div>
                <span v-if="record.add">{{ record.goodDiscount }}</span>
                <a-input-number
                  v-else
                  id="inputNumber"
                  v-model:value="record.goodDiscount"
                  :max="9.99"
                  :min="1"
                />
              </div>
            </template>
            <!-- 服务次数 -->
            <!-- <template #num="{ record, index }">
              <div>
                <span v-if="record.add">{{ record.num }}</span>
                <a-input-number
                  v-else
                  id="inputNumber"
                  v-model:value="record.num"
                  :min="1"
                />
              </div>
            </template> -->
            <template #operation="{ record }">
              <a-button
                type="link"
                danger
                @click="addService(record)"
                v-has="{ a: $route, b: 2 }"
                class="d-a-center"
                >{{ record.add ? "已添加" : "添加" }}</a-button
              >
            </template>
          </a-table>
        </div>
      </div>
    </a-modal>
    <!-- 查看弹窗 -->
    <a-modal
      width="92%"
      v-model:visible="lookVisibleShow"
      :title="查看"
      @cancel="cancleOrder('lookVisibleShow')"
    >
      <template #footer>
        <div class="d-j-around">
          <a-button class="d-a-center" @click="cancleOrder('lookVisibleShow')"
            >关闭</a-button
          >
        </div>
      </template>
      <!-- 表单 -->
      <a-form
        style="padding-top: 20px"
        :hideRequiredMark="true"
        :model="orderForm"
      >
        <!-- 名称，类型 -->
        <a-row :gutter="20">
          <a-col :span="12" :lg="10" :xs="10">
            <a-form-item label="权益卡名称" style="margin-left: 60px">
              <a-input disabled v-model:value="orderForm.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12" :lg="12" :xs="10">
            <a-form-item
              label="权益卡类型"
              style="margin-left: 155px"
              name="type"
            >
              <a-input v-model:value="orderForm.type" disabled></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <!-- 数量，营业额 -->
        <a-row :gutter="20">
          <a-col :span="12" :lg="10" :xs="10">
            <a-form-item label="发放数量" style="margin-left: 72px" name="num">
              <a-input disabled v-model:value="orderForm.num"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12" :lg="12" :xs="10">
            <a-form-item
              label="营业额"
              style="margin-left: 179px"
              name="businessPrice"
            >
              <a-input
                v-model:value="orderForm.businessPrice"
                disabled
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <!-- 激活时间，使用时间 -->
        <a-row :gutter="20">
          <a-col :span="12" :lg="10" :xs="10">
            <a-form-item
              label="激活时间"
              style="margin-left: 72px"
              name="activateDay"
            >
              <a-input disabled v-model:value="orderForm.activateDay"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12" :lg="12" :xs="10">
            <a-form-item
              label="使用时间"
              style="margin-left: 165px"
              name="useDay"
            >
              <a-input disabled v-model:value="orderForm.useDay"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <!-- 备注信息，会员卡折扣 -->
        <a-row :gutter="20">
          <a-col :span="12" :lg="10" :xs="10">
            <a-form-item
              label="备注信息"
              style="margin-left: 72px"
              name="remark"
            >
              <a-input disabled v-model:value="orderForm.remark"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12" :lg="12" :xs="10">
            <a-form-item
              label="会员卡折扣"
              style="margin-left: 155px"
              name="goodDiscount"
            >
              <a-input
                disabled
                v-model:value="orderForm.goodDiscount"
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
    <!-- 激活明细的弹窗 -->
    <!-- 激活明细 -->
    <a-modal
      width="800px"
      v-model:visible="jihuoVisible"
      title="激活明细"
      @cancle="cancleOrder('jihuoVisible')"
    >
      <a-row style="margin: 0 0 30px 0" class="d-a-center">
        <div v-for="(item, index) in tabs" :key="item.id">
          <a-col :span="6">
            <a-tag
              :color="item.id == orderAct ? 'blue' : ''"
              @click="changeOrder(item.id)"
              >{{ item.title }}</a-tag
            >
          </a-col>
        </div>
        <a-col>
          <!-- 头部 -->
          <a-form ref="searchRef" :model="searchForm1" :hideRequiredMark="true">
            <a-row class="d-a-center">
              <a-col class="d-a-center">
                <a-form-item
                  name="saleValue"
                  label=""
                  class="d-a-center"
                  style="margin-top: 24px"
                >
                  <a-input
                    placeholder="根据卡号模糊搜索"
                    v-model:value="searchForm1.cardNum"
                    allowClear="true"
                    class="d-a-center"
                  ></a-input> </a-form-item
              ></a-col>
              <a-col>
                <a-button type="primary" @click="searchs" class="d-a-center"
                  >查询</a-button
                >
              </a-col>
            </a-row>
          </a-form>
        </a-col>
      </a-row>
      <!-- 明细表格 -->
      <a-table
        :columns="
          orderAct == 1 ? columns1 : orderAct == 2 ? columns3 : columns2
        "
        :data-source="listRights"
        bordered
        :loading="loading"
        :pagination="jihuoPagination"
        @change="handleTableChanges2"
        style="margin-top: -10px"
      >
        <template #status="{ record }">
          <div>{{ orderListStatus(record.status) }}</div>
        </template>
        <template #status1="{ record }">
          <div>{{ ComsumeStatus(record.status) }}</div>
        </template>
        <template #operation="{ record }">
          <a-button
            type="link"
            @click="handleFreeze(record.id)"
            v-has="{ a: $route, b: 2 }"
            class="d-a-center"
            >冻结</a-button
          >
        </template>
      </a-table>
    </a-modal>
    <a-button
      type="danger"
      @click="excleData"
      v-has="{ a: $route, b: 2 }"
      class="d-a-center"
      >导出</a-button
    >
  </div>
</template>

<script>
import { reactive, toRefs, ref, computed, createVNode } from "vue";
// import * as api from "@/api/market/rights.js";
import * as api from "@/api/member/list.js";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { useModal,useSelects } from "@/hooks"

export default {
  setup() {
    const searchRef = ref("");
    const formRef = ref("");
    const data = reactive({
      listRights: [], //明细列表
      searchForm1: {},
      tabs: [
        { title: "已激活", id: 1 },
        { title: "未激活", id: 0 },
        { title: "已冻结", id: 2 },
      ],
      orderAct: 1, //1线上 2线下
      number: "", //当前机构编号
      jihuoVisible: false,
      EditDisable: false,
      create: false,
      title: "创建",
      orderForm: {},
      memberList: [],
      // searchForm: {type:1},
      searchForm: {},
      serviceForm: {},
      servicesList: [],
      serviceList: [], //服务项目列表
      visibleShow: false,
      editServiceShow: false,
      lookVisibleShow: false,
      labelCol: { style: { width: "150px" } },
    });
    //已冻结
    const columns3 = [
      {
        title: "卡号",
        dataIndex: "cardNum",
        className: "table",
        align: "center",
      },
      {
        title: "操作人",
        dataIndex: "freezeName",
        className: "table",
        align: "center",
      },
    ];
    //未激活
    const columns2 = [
      {
        title: "卡号",
        dataIndex: "cardNum",
        className: "table",
        align: "center",
      },
      {
        title: "操作",
        dataIndex: "operation",
        className: "table",
        align: "center",
        fixed: "right",
        slots: {
          customRender: "operation",
        },
      },
    ];
    // 激活明细表格
    const columns1 = [
      {
        title: "卡号",
        dataIndex: "cardNum",
        className: "table",
        align: "center",
      },
      {
        title: "激活用户",
        dataIndex: "userName",
        className: "table",
        align: "center",
        sort: true,
      },
      {
        title: "用户id",
        dataIndex: "userId",
        className: "table",
        align: "center",
      },
      {
        title: "激活时间",
        dataIndex: "updatedAt",
        className: "table",
        align: "center",
      },
      {
        title: "操作",
        dataIndex: "operation",
        className: "table",
        align: "center",
        fixed: "right",
        slots: {
          customRender: "operation",
        },
      },
    ];
    //表单规则
    const rules = {
      name: [{ required: true, message: "请输入" }],
      type: [{ required: true, message: "请输入" }],
      num: [
        { required: true, message: "请输入" },
        {
          pattern: /^[0-9]*[1-9][0-9]*$/,
          // /^\+?[1-9]\d*$/,
          message: "大于0的正整数",
          trigger: ["change", "blur"],
        },
      ],
      activateDay: [
        { required: true, message: "请输入" },
        {
          pattern: /^([1-9]\d*|[0]{1,1})$/,
          // /^\+?[1-9]\d*$/,
          message: "请输入整数",
          trigger: ["change", "blur"],
        },
      ],
      useDay: [
        { required: true, message: "请输入" },
        {
          pattern: /^([1-9]\d*|[0]{1,1})$/,
          // /^\+?[1-9]\d*$/,
          message: "请输入整数",
          trigger: ["change", "blur"],
        },
      ],
      remark: [{ required: true, message: "请输入" }],
      businessPrice: [
        { required: true, message: "请输入" },
        {
          pattern: /^([1-9]\d*|[0]{1,1})$/,
          // /^\+?[1-9]\d*$/,
          message: "请输入整数",
          trigger: ["change", "blur"],
        },
      ],
      goodDiscount: [
        { required: true, message: "请输入" },
        {
          pattern: /^(?:[1-9](?:\.\d+)?|0\.\d{1,2}|9\.[0-8]\d?)$/,
          // pattern: /^([1-9]\d*|[0]{1,1})$/,
          message: "请输入 1-9 之间的整数或小数",
          trigger: ["change", "blur"],
        },
      ],
    };
    //服务项目表格
    const serviceColumns = reactive([
      {
        title: "服务项目",
        dataIndex: "name",
        className: "table",
      },
      {
        title: "服务价格/次",
        dataIndex: "price",
        className: "table",
      },
      {
        title: "优惠折扣",
        dataIndex: "goodDiscount",
        className: "table",
        align: "center",
        slots: {
          customRender: "goodDiscount",
        },
      },
      // {
      //   title: "服务次数",
      //   dataIndex: "num",
      //   className: "table",
      //   align: "center",
      //   slots: {
      //     customRender: "num",
      //   },
      // },
      {
        title: "操作",
        dataIndex: "operation",
        className: "table",
        slots: {
          customRender: "operation",
        },
      },
    ]);
    //表格名称
    const columns = reactive([
      {
        title: "编号",
        dataIndex: "id",
        className: "table",
      },
      {
        title: "名称",
        dataIndex: "name",
        className: "table",
      },
      {
        title: "类型",
        dataIndex: "type",
        className: "table",
      },
      {
        title: "发放数量",
        dataIndex: "num",
        className: "table",
      },
      {
        title: "激活数量",
        dataIndex: "activateNum",
        className: "table",
      },
      {
        title: "上线时间",
        dataIndex: "createdAt",
        className: "table",
      },
      {
        title: "状态",
        dataIndex: "status",
        className: "table",
        slots: {
          customRender: "status",
        },
      },
      {
        title: "操作",
        dataIndex: "operation",
        className: "table",
        slots: {
          customRender: "operation",
        },
      },
    ]);
    //状态选择
    const saleStatusOptions = reactive([
      {
        name: "全部",
        id: "",
      },
      {
        name: "进行中",
        id: "0",
      },
      {
        name: "已结束",
        id: 1,
      },
    ]);

    //服务列表查询
    const handleSearch = () => {
      pages.current = 1;
      initService();
    };

    // 页码
    const listPage = reactive({
      current: 1,
      pageSize: 10,
      total: 0,
    });
    const pages = reactive({
      current: 1,
      pageSize: 10,
      total: 0,
    });
    const jihuoPage = reactive({
      current: 1,
      pageSize: 10,
      total: 0,
    });
    //分页器
    const pagination = computed(() => ({
      current: listPage.current,
      pageSize: listPage.pageSize,
      pageSizeOptions: ["10", "20", "30"],
      showTotal: (total, range) => {
        return "共" + total + "条";
      },
      total: listPage.total,
      showQuickJumper: true,
      showSizeChanger: true,
    }));
    const paginations = computed(() => ({
      current: pages.current,
      pageSize: pages.pageSize,
      pageSizeOptions: ["10", "20", "30"],
      showTotal: (total, range) => {
        return "共" + total + "条";
      },
      total: pages.total,
      showQuickJumper: true,
      showSizeChanger: true,
    }));
    const jihuoPagination = computed(() => ({
      current: jihuoPage.current,
      pageSize: jihuoPage.pageSize,
      pageSizeOptions: ["10", "20", "30"],
      showTotal: (total, range) => {
        return "共" + total + "条";
      },
      total: jihuoPage.total,
      showQuickJumper: true,
      showSizeChanger: true,
    }));
    //切换页码
    const handleTableChanges = (pagination, filters, sorter) => {
      console.log(pagination, "当前分页");
      listPage.current = pagination.current;
      listPage.pageSize = pagination.pageSize;

      //调方法接口
      init();
    };
    const handleTableChanges1 = (pagination, filters, sorter) => {
      console.log(pagination, "当前分页");
      pages.current = pagination.current;
      pages.pageSize = pagination.pageSize;
      // 请求列表接口
      initService();
    };
    const handleTableChanges2 = (pagination, filters, sorter) => {
      console.log(pagination, "当前分页");
      jihuoPage.current = pagination.current;
      jihuoPage.pageSize = pagination.pageSize;
      // 请求列表接口
      initRightList();
    };
    // const
    //激活明细的查询
    const searchs = () => {
      // console.log(1);
      jihuoPage.current = 1;
      initRightList();
    };
    //导出
    const excleData = () => {
      if (rowSelection.selectedRowKeys.length == 0) {
        message.warning("请选择你要导出的订单");
        return;
      }
      const {closeModal} = useModal.confirm({
        title: `确认导出当前${rowSelection.selectedRowKeys.length}条数据吗?`,
        icon: createVNode(ExclamationCircleOutlined),
        onOk() {
          //根据搜索条件导出
          let obj = {
            ...data.searchForm,
            id: rowSelection.selectedRowKeys.join(",")
          };
          api.deriveRedeemCodeAPI({ ...obj }).then((res) => {
            let link = document.createElement("a");
            //创建一个a标签
            link.style.display = "none";
            //将a标签隐藏
            link.href = res.object;
            console.log(res.object);
            //给a标签添加下载链接  "域名+接口"  safe是一个动态的域名  后面的接口替换成你自己的下载接口
            link.setAttribute("download", "订单");
            // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
            document.body.appendChild(link);
            //将上面创建的a标签加入到body的尾部
            link.click();
            closeModal()
          });
        },
      });
    };


    const { 
				renderData,
				rowSelection,
			} = useSelects({})

    //点击已激活未激活已冻结
    const changeOrder = (e) => {
      if (e == data.orderAct) return;
      data.orderAct = e;
      pages.current = 1;
      initRightList();
    };
    //冻结
    const handleFreeze = (id) => {
      api.updateUserCardStatusAPI({ id, status: 2 }).then((r) => {
        if (r.success) {
          message.success("操作成功");
          initRightList();
        }
      });
    };
    //激活明细的列表
    async function initRightList() {
      let obj = {
        pageNum: jihuoPage.current,
        pageSize: jihuoPage.pageSize,
        status: data.orderAct,
        number: data.number, //机构编号
        ...data.searchForm1,
      };
      let res = await api.selectUserCardByNumberAPI(obj);
      console.log(res);
      if (res.success) {
        res.object.list.map((el) => (el.key = el.id));
        data.listRights = res.object.list;
        data.loading = false;
        jihuoPage.total = res.object.total;
      }
    }
    initRightList();
    //激活明细
    const handleActive = (item) => {
      console.log(1, item);
      data.number = item.number;
      data.jihuoVisible = true;
      initRightList();
    };
    //编辑
    const edit = (item) => {
      console.log(1, item);
      data.visibleShow = true;
      data.title = "编辑";
      // data.serviceList = item.object.list;
      // data.orderForm = item;
      // data.orderForm.goodDiscount = item.goodDiscount;
      data.EditDisable = !data.EditDisable;
      //显示表格
      api.selectCardByIdAPI({ id: item.id }).then((res) => {
        if (res.success) {
          data.orderForm = { ...res.object };
          data.orderForm.goodDiscount = res.object.goodList[0].goodDiscount;
          // data.orderForm.goodDiscount = res.object.goodDiscount;
          // console.log(1111111111111, res.object);
          res.object.goodList.forEach((item) => {
            item.name = item.comboServiceName;
            item.num = item.comboServiceCount;
            item.id = item.comboServiceId.toString();
          });
          console.log(res.object.goodList);
          data.serviceList = [...(res.object.goodList || [])];
        }
      });
    };
    //查看
    const look = (item) => {
      console.log(item);
      data.lookVisibleShow = true;
      // selectCardByIdAPI
      api.selectCardByIdAPI({ id: item.id }).then((res) => {
        console.log(res);
        if (res.success) {
          // data.orderForm.goodDiscount = res.object.goodDiscount;
          data.orderForm = { ...res.object };
          data.orderForm.goodDiscount = res.object.goodList[0].goodDiscount;
          // data.serviceList = [...(res.object.goodTempList || [])];
          // console.log(data.orderForm, data.serviceList);
        }
      });
    };
    //保存
    const submitBtn = () => {
      // console.log(1);
      // 校验表单
      formRef.value.validate().then(() => {
        if (data.serviceList.length == 0) {
          message.error("请选择服务项目");
          return;
        }
        let goodTempList = data.serviceList.map((item) => {
          return {
            comboServiceCount: item.num,
            comboServiceId: item.id,
            comboServiceName: item.name,
            comboServiceType: "服务项目",
            goodDiscount: item.goodDiscount,
            price: item.price,
          };
        });
        let goodList = data.serviceList.map((item) => {
          return {
            comboServiceCount: item.num,
            comboServiceId: item.id,
            comboServiceName: item.name,
            comboServiceType: "服务项目",
            goodDiscount: item.goodDiscount,
            price: item.price,
          };
        });
        if (data.title === "创建") {
          api
            .insertVipCardTempAPI({ ...data.orderForm, goodTempList })
            // .insertVipCardTempAPI({ ...data.orderForm })
            .then((res) => {
              if (res.success) {
                message.success("创建成功");
              } else {
                message.error("创建失败");
              }
              listPage.current = 1;
              data.visibleShow = false;
              init();
              data.orderForm = {};
              data.serviceList = [];
            });
        } else {
          api.updateVipCardAPI({ ...data.orderForm, goodList }).then((res) => {
            if (res.success) {
              message.success("修改成功");
            } else {
              message.error("修改失败");
            }
            listPage.current = 1;
            data.visibleShow = false;
            init();
          });
        }
      });
    };
    //取消，关闭
    const cancleOrder = (v) => {
      data[v] = false;
      if (v == "editServiceShow") {
        data.serviceList = [];
      }
      if (v == "visibleShow") {
        data.orderForm = {};
        data.serviceList = [];
      }
    };
    //服务列表
    async function initService() {
      api
        .selectServicesByParentIdAndNameAPI({
          id: 1,
          ...data.serviceForm,
          ...{ pageNum: pages.current, pageSize: pages.pageSize },
        })
        .then((r) => {
          data.servicesList = r.object.list.map((m) => {
            if (data.serviceList.length > 0) {
              let arr = data.serviceList.filter((v) => v.id == m.id);
              return {
                key: m.id,
                add: arr.length > 0,
                ...m,
                num: 1,
                // goodDiscount: 9,
                goodDiscount: data.orderForm.goodDiscount,
              };
            }
            return {
              key: m.id,
              add: false,
              ...m,
              num: 1,
              // goodDiscount: 9,
              goodDiscount: data.orderForm.goodDiscount,
            };
          });
          pages.total = r.object.total;
          data.visible = true;
        });
    }
    initService();
    //服务名称表
    const serviceName = (id) => {
      let list = data.serviceList.find((el) => el.id == id);
      if (list.serviceName) {
        return list;
      }
    };
    //弹窗tag标签x号  删除
    const closelog = (e, id) => {
      data.serviceList.splice(e, 1);
      data.servicesList.map((m) => {
        if (m.id == id) {
          m.add = false;
        }
        return m;
      });
    };
    //弹窗删除服务
    const delService = () => {
      console.log("del");
    };
    //弹窗添加服务
    const addService = async (item) => {
      console.log("add");
      if (item.add) return;
      data.servicesList.map((m) => {
        if (m.id == item.id) {
          m.add = true;
          data.serviceList.push(m);
          console.log(data.serviceList);
        }
        return m;
      });
    };
    //编辑服务项目
    const editService = () => {
      // console.log("1");
      data.editServiceShow = true;
      initService();

      // data.visibleShow = false;
    };
    //创建
    // /admin/vip/insertVipCardTemp
    const addBtn = () => {
      // console.log(1);
      data.visibleShow = true;
      data.title = "创建";
    };
    //搜索
    const search = () => {
      // console.log(1);
      listPage.current = 1;
      rowSelection.selectedRowKeys = []
      init();
    };
    //日期选择
    const panelChange = (date, dateString) => {
      data.searchForm.startTime = dateString[0];
      data.searchForm.endTime = dateString[1];
    };
    //列表数据
    async function init() {
      const obj = {
        pageNum: listPage.current,
        pageSize: listPage.pageSize,
        ...data.searchForm,
      };
      const res = await api.selectOnlineVipCardListAPI(obj);
   
      if (res.success) {
        res.object.pagedData.list.map((el) => (el.key = el.number));
        data.memberList = res.object.pagedData.list;
        listPage.total = res.object.pagedData.total;
        renderData.value = res.object.allPowerCardIds;
      }
      // console.log(data.memberList);
    }
    init();

    return {
      ...toRefs(data),
      saleStatusOptions,
      columns,
      listPage,
      panelChange,
      search,
      addBtn,
      editService,
      serviceColumns,
      // serviceColumns1,
      searchRef,
      formRef,
      rules,
      serviceName,
      pages,
      addService,
      delService,
      closelog,
      paginations,
      pagination,
      handleTableChanges1,
      handleTableChanges,
      handleSearch,
      cancleOrder,
      submitBtn,
      look,
      edit,
      handleActive,
      columns1,
      jihuoPage,
      jihuoPagination,
      handleFreeze,
      changeOrder,
      columns2,
      columns3,
      rowSelection,
      excleData,
      searchs,
      handleTableChanges2,
    };
  },
  // components: {
  //   ExclamationCircleOutlined,
  // },
};
</script>

<style scoped lang="less">
.service {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .left {
    width: 45%;
    height: 100%;
    .select {
      margin-top: 20px;
      display: flex;
      // justify-content: space-evenly;
      .tagBox {
        margin: 100px;
      }
    }
  }
  .middle {
    width: 1px;
    min-height: 100px;
    border: 0.5px solid #f0f0f0;
  }
  .right {
    width: 45%;
    height: 100%;
    margin-right: 10px;
  }
}
</style>
